<template>
  <div class="container">
    <div class="top-div">
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        用户名称
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input clearable v-model="userName" placeholder="请输入用户名称" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        电话号码
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input clearable v-model="phone" placeholder="请输入电话号码" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        状态
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-select clearable style="width: 100px;" v-model="status" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        创建时间
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-date-picker
            clearable
            style="width: 400px;"
            v-model="currentDate"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="searchCases">搜索</el-button>
      <el-button icon="el-icon-refresh" style="margin-left: 10px;" @click="resetTable"></el-button>
    </div>
    <el-table v-loading="tableShow" style="width: 100%;height: calc(100vh - 183px)" :data="tableData">
      <el-table-column
          type="selection">
      </el-table-column>
      <el-table-column label="用户编号" min-width="50" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名称" min-width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" min-width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户角色" min-width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部门" min-width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.deptName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px;">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="active"
              :inactive-value="inactive"
              @change="handleStatusChange(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
          <el-button type="text" size="small" icon="el-icon-refresh-right">重置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: center;padding-top: 10px;">
      <el-pagination
          background
          :total="totalCount"
          :page-size="pageSize"
          @current-change="current_change"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

  <update-user-manager
      @afterSubmit="initUserList"
      ref="userManagerUpdate"></update-user-manager>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import updateUserManager from "@/page/dialog/updateUserManager.vue";

export default {
  components:{updateUserManager},
  mounted() {
    this.initUserList()
  },
  data() {
    return {
      active: 1,
      inactive: 0,
      tableShow: false,
      pageNum: 1,
      pageSize: 5,
      totalCount: 1,
      userName: '',
      phone: '',
      status: '',
      currentDate: [],
      userTypeList: [
        {
          value: '超级管理员',
          label: '超级管理员'
        }, {
          value: '一般人员',
          label: '一般人员'
        }],
      options: [
        {
          value: 1,
          label: '正常'
        }, {
          value: 0,
          label: '停用'
        }],
      tableData: [],
    }
  },
  methods: {
    submitEdit() {
      if (this.modifyUser.code == 1) {
        this.tableData[0] = this.modifyUser
      } else if (this.modifyUser.code == 2) {
        this.tableData[1] = this.modifyUser
      }
      this.alertSuccess('编辑成功')
      this.centerDialogVisible = false

    },
    edit(row) {
      console.log(row)
      // this.modifyUser = row
      // this.centerDialogVisible = true
      this.$refs.userManagerUpdate.open(row);

    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
    handleStatusChange(row) {
      console.log('Status changed to', row.status);
    },
    resetTable() {
      this.userName = ''
      this.phone = ''
      this.status = ''
      this.currentDate = []
      this.initUserList()
    },
    searchCases() {
      this.initUserList()
    },
    initUserList() {
      this.tableShow = true
      const self = this;
      const param = {}
      param.userName = this.userName
      param.phone = this.phone
      param.status = this.status
      param.pageNum = self.pageNum
      param.pageSize = self.pageSize
      if (this.currentDate.length > 0) {
        param.startDate = this.currentDate[0]
        param.endDate = this.currentDate[1]
      } else {
        param.startDate = ''
        param.endDate = ''
      }
      api.userList(param).then(response => {
        if (response.code == 200) {
          self.tableData = response.data.data;
          self.totalCount = response.data.total;
          self.tableShow = false
          if (self.totalCount !== 0) {
            if (self.pageNum > Math.ceil(response.data.total / self.pageSize)) {
              self.pageNum = Math.ceil(response.data.total / self.pageSize);
              self.initUserList();
            }
          }
        } else {
          self.$message.error(response.msg);
        }
      })
    },
    current_change(currentPage) {
      this.pageNum = currentPage;
      this.initUserList();
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.initUserList();
    },
  }
};
</script>
<style scoped>


</style>